<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 0:59
 */
-->
<template>
  <div class="announcement">
    <div class="tabs-wrap">
      <div class="tabs-cont">
        <div class="title">
          <h3>通知公告</h3>
        </div>

        <div class="outer-container">
          <ul class="container-ul">

            <li v-for="item in tableData" :key="item.announcementId" class="box-li">
              <div class="month-box">
                <span class="day">{{ new Date(item.time).getDate() }}</span>
                <span class="month">{{ new Date(item.time).getMonth() + 1 }} 月</span>
              </div>
              <div class="box-inf" @click="toAnn(item.announcementId)">
                <h5><a>{{ item.title }}</a></h5>
                <p>{{ item.content }}</p>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>


    <!-- 分页 -->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalCount"
        :current-page="currentPage"
        @current-change="changePage"
        :hide-on-single-page="true"
        class="page">
    </el-pagination>
  </div>
</template>

<script>
import modelAnn from "../../models/announcement";

export default {
  name: "MainAnnouncement",
  props: {},
  data() {
    return {
      // 分页
      loading: true,
      currentPage: 1,
      totalCount: 1,

      // 数据
      tableData: []
    }
  },
  created() {
    /**
     * 获取数据
     */
    this.changePage(this.currentPage);
  },
  mounted() {

  },
  methods: {
    /**
     * 跳转
     *
     * @param id
     */
    toAnn(id) {
      this.$router.push('/detail/ann/' + id)
    },

    /**
     * 获取数据
     *
     * @param val
     */
    changePage(val) {
      this.currentPage = val;
      modelAnn.getList({}, this.currentPage, 9)
          .then((response) => {
            this.tableData = response.records;
            this.totalCount = response.pages;
            this.loading = false;
          });
    }
  },
  watch: {}
}
</script>


<style lang="less" scoped>
.announcement {
  .title {
    width: 100%;
    height: 56px;
    border-bottom: 1px solid #e2e2e2;

    h3 {
      font-size: 20px;
      line-height: 56px;
      color: #343434;
      font-weight: 600;
    }
  }

  .tabs-wrap .outer-container {
    width: 100%;
    padding-bottom: 39px;
    overflow: hidden;
  }

  .outer-container .container-ul {
    width: 100%;
    overflow: hidden;
  }

  .outer-container .box-li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
  }

  .box-li .month-box {
    float: left;
    width: 64px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 9px 23px 9px 0;
    border-right: 1px solid #C5C5C5;
    color: #707070;
    cursor: default;
  }

  .month-box .day {
    display: block;
    font-size: 24px;
    line-height: 28px;
    color: #707070;
  }

  .month-box .month {
    display: block;
    font-size: 18px;
    line-height: 20px;
    color: #707070
  }

  .box-li .box-inf {
    float: left;
    width: calc(100% - 64px);
    padding-left: 23px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
  }

  .box-li .box-inf h5 {
    height: 35px;
    line-height: 35px;
    font-weight: 400;
    color: #0C0B0B;
    overflow: hidden;
  }

  .box-li .box-inf h5 a {
    font-size: 19px;
    color: #0C0B0B;
  }

  .box-li .box-inf p {
    line-height: 28px;
    height: 28px;
    font-size: 15px;
    color: #707070;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .tabs-wrap .padding-box {
    height: 45px;
  }
}
</style>